<!-- userRoles -->
<template>
  <GgPage pageType="2" title="Roles">
    <template v-slot:left>
      <div class="mar-l-b">
        <gg-create-button @click="() => {}" label="Create role" />
      </div>
      <gg-flex-menus
        :menus="menuDatas"
        @select="menuSelect"
        :default-active="activeIndex"
      />
    </template>
    <edoovo-table
      height="100%"
      ref="multipleTable"
      :data="tableData"
      rowKey="id"
      title="Roles"
      defaultValue="-"
      class="list-tableBox"
      v-loading="isLoading"
      @sortChange="_onSortChange"
      :sort="sort"
    >
      <!-- ===== -->
      <!-- 空状态 -->
      <!-- ===== -->
      <div slot="empty" style="text-align: center">
        <div
          style="
            width: 213px;
            text-align: center;
            border-radius: 50%;
            margin-bottom: 12px;
            line-height: 200px;
          "
        >
          <img
            style="width: 100%"
            :src="require('@/assets/images/products/noData.svg')"
          />
        </div>
        <p style="font-size: 22px">No lessons yet.</p>
      </div>
      <!-- ======= -->
      <!-- 分页组件 -->
      <!-- ======= -->
      <edoovo-pagination
        slot="pagination"
        @size-change="_pageSizeChange"
        @current-change="_pageChange"
        :current-page="pageNumber"
        :page-size="pageSize"
        :total="totalNum"
      />
      <!-- ====== -->
      <!-- 筛选组件 -->
      <!-- ====== -->
      <div v-if="filterRenderData.length" class="list-filterBox" slot="filter">
        <base-filter
          ref="tablefilter"
          @filterCallback="_filterCallback"
          :renderData="filterRenderData"
          :multKeys="multKeys"
        />
      </div>
      <!-- =========== -->
      <!-- 每一项column -->
      <!-- =========== -->
      <edoovo-table-column
        size="L"
        label="Role name"
        class="id"
        prop="roleName"
        sortName="roleName"
        :tooltip="true"
        @click="() => {}"
      />
      <edoovo-table-column
        size="XL"
        label="Description"
        prop="description"
        sortName="description"
        v-slot="{ row }"
      >
        {{ row.description }}
      </edoovo-table-column>
      <!-- ====== -->
      <!-- action -->
      <!-- ====== -->
      <edoovo-table-column v-slot="{ row }" key="action">
        <el-tooltip
          content="Edit"
          popper-class="edoovo-table-cell-tooltip"
          :visible-arrow="false"
        >
          <gg-submit-button @click="() => {}"> Edit </gg-submit-button>
        </el-tooltip>
        <el-tooltip
          :content="
            row.canDelete ? 'Delete' : 'Cannot delete the lesson used in course'
          "
          popper-class="edoovo-table-cell-tooltip"
          :visible-arrow="false"
        >
          <div style="margin-left: 10px">
            <gg-submit-button :disabled="!row.canDelete" @click="() => {}">
              Delete
            </gg-submit-button>
          </div>
        </el-tooltip>
      </edoovo-table-column>
    </edoovo-table>
  </GgPage>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      aa: "dd",
      menuDatas: [
        {
          name: "Users",
          key: "Users",
          children: [
            {
              name: "Active",
              key: "Active",
            },
            {
              name: "Deleted",
              key: "Deleted",
            },
          ],
        },
        {
          name: "Roles",
          key: "Roles",
          active: true,
        },
      ],
      activeIndex: "Roles",
      isLoading: false,
      sort: { name: "createDate", type: "desc" },
      pageNumber: 1,
      pageSize: 20,
      totalNum: 4,
      tableData: [
        {
          id: "5f7c9c02672f402a05501de1",
          roleName: "Joanna Doe",
          description: "Control admin console",
          canDelete: false,
        },
        {
          id: "5f7c9c02672f402a05501de2",
          roleName: "Eric Wong",
          description: "Control students and online classes",
          canDelete: true,
        },
      ],
      filterRenderData: [
        { filterKey: "Role Name", type: "input" },
        { filterKey: "Description", type: "input" }
      ],
      multKeys: [],
    };
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
    },
    _getData() {
      console.log("加载新数据");
    },
    _onSortChange(sort) {
      this.sort = sort;
      this._getData();
    },
    _pageChange(val) {
      this.pageNumber = val;
      this._getData();
    },
    _pageSizeChange(val) {
      this.pageSize = val;
      this._getData();
    },
    _filterCallback(data) {
      console.log("用户选的筛选条件 === ", data);
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
</style>